<template>
	<article class="kp-set" v-bind:style="{ height: pageHeight+'px' }">
		<!-- //头像部分 -->
		<div class="kp-set-face">
			<div class="kp-sf-img">
				<img :src="headPortrait" v-if="headPortrait"  :onerror="errorImg">
				<img src="../../../assets/face.png" v-else>
			</div>
			<!--<div class="kp-sf-info">编辑头像</div>-->
		</div>
		<!-- //信息表单 -->
		<div class="kp-basic-info">
			<h2>基本信息</h2>
			<div class="kp-bi-box">

				<group class="kp-bb-li" @click.native="editNickname">
					<x-input title='昵称' text-align="right" class="kp-icon-1 kp-icon-2" placeholder="方便对您的称呼" :show-clear="false" disabled v-model="userinfo.nickName"></x-input>
				</group>
				<group class="kp-bb-li" @click.native="editAutograph">
					<x-input title='个性签名' text-align="right" class="kp-icon-1" placeholder="展示在游记个人中心" disabled :show-clear="false" v-model="signature" @on-click-clear-icon="onclear"></x-input>
				</group>
				<div class="kp-bd-mtb49"></div>
				<group class="kp-bb-li" @click.native="editCard">
					<x-input title='姓名' text-align="right" class="kp-icon-1 kp-icon-2" placeholder="您的真实姓名" disabled :show-clear="false" v-model="userinfo.userName" @on-click-clear-icon="onclear"></x-input>
				</group>
				<group class="kp-bb-li">
					<x-input title='手机号' text-align="right" placeholder="您的手机号码" disabled class="kp-icon-none" :show-clear="false" v-model="phone" @on-click-clear-icon="onclear"></x-input>
				</group>
				<group class="kp-bb-li" @click.native="editCard">
					<x-input title='身份证号' text-align="right" class="kp-icon-1 kp-icon-2" disabled placeholder="输入证件号码" :show-clear="false" v-model="icard" @on-click-clear-icon="onclear"></x-input>
				</group>
				<group title="性别" class="kp-bb-li kp-bb-li-flex">
					<radio :options="sex" @on-change="change" v-model="sexc"></radio>
				</group>
				<group class="kp-bb-li" @click.native="editEamil">
					<x-input title='邮箱' text-align="right" class="kp-icon-1" placeholder="接收电子账单" disabled :show-clear="false" v-model="userEmall" @on-click-clear-icon="onclear"></x-input>
				</group>
				<div class="kp-bd-mtb49"></div>
				<group class="kp-bb-li" @click.native="updatePass">
					<x-input title='修改密码' text-align="right" class="kp-icon-1" placeholder="" disabled :show-clear="false" v-model="disabledValue" @on-click-clear-icon="onclear"></x-input>
				</group>
				<group class="kp-bb-li" @click.native="accountLink" v-show="false">
					<x-input title='账号关联' text-align="right" class="kp-icon-1" placeholder="" :show-clear="false" v-model="disabledValue" @on-click-clear-icon="onclear"></x-input>
				</group>
			</div>
		</div>
	</article>
</template>

<script>
	import { mapGetters, mapActions } from "vuex";
	import { XInput, Group, Radio } from 'vux'
	export default {
		data() {
			return {
				disabledValue: '',
				pageHeight: '',
				sex: ['女', '男'],
				headPortrait: '', //头像
				sexc: '', //性别
				phone: '', //电话
				icard: '', //身份证
				userEmall: '', //邮箱
				signature: '', //个性签名
				sexnum: '',
				errorImg:'this.src="' + require('../../../assets/face.png') + '"',
			}
		},
		mounted() { //载入后执行
			var h = document.documentElement.clientHeight || document.body.clientHeight;
			this.pageHeight = h;
			this.getdatil();
			this.$root.eventHub.$on('nicketSex', () => { //eventHub接收事件
				this.save();
			});
			if(this.userinfo.headPortrait) {
				var url = this.$baseUrl.environment ? 'http://img.kpcx179.com/' : 'http://imgtest.kpcx179.com/';
				this.headerimg = url + this.userinfo.headPortrait;
			}
		},
		created() { //创建后

		},
		watch: { //监听放置
		},
		methods: { //方法放置
			onclear() {

			},
			change(value, label) {
				if(value == "女") {
					this.sexnum = 1;
				} else {
					this.sexnum = 0;
				}
			},
			editCard() {
				if(this.userinfo.IDNo) {
					this.$toast('您已经实名认证过了', {
						durtaion: 200,
						location: 'center',
					});
					return false;
				} else {
					this.$router.push({
						path: '/my/modifyCard'
					})
				}

			},
			editEamil() {
				this.$router.push({
					path: '/my/modifyEmail'
				})
			},
			editAutograph() {
				this.$router.push({
					path: '/my/modifyAutograph'
				})
			},
			editNickname() {
				this.$router.push({
					path: '/my/modifyNickname'
				})
			},
			updatePass() {
				//修改密码
				this.$router.push({
					path: '/my/modifyPass'
				})
			},
			accountLink() {
				//账号关联
				this.$router.push({
					path: '/my/accountLink'
				})
			},
			getdatil() {
				var userinfo = this.userinfo;
				//性别
				if(userinfo.sex) {
					if(userinfo.sex == 1) {
						this.sexc = '女';
					} else if(userinfo.sex == 0) {
						this.sexc = '男';
					} else {
						this.sexc = '';
					}
				}
				//身份证号
				if(userinfo.IDNo) {
					this.icard = userinfo.IDNo.replace(/(.{4}).*(.{1})/, "$1*************$2");
				}
				//手机号
				if(userinfo.phone) {
					this.phone = userinfo.phone.replace(/^(\d{3})\d{4}(\d+)/, "$1****$2");
				}
				//邮箱
				if(userinfo.userEmall) {
					this.userEmall = userinfo.userEmall;
				}
				if(userinfo.signature) {
					this.signature = unescape(userinfo.signature.replace(/\\(u[0-9a-fA-F]{4})/gm, '%$1'));
					console.log(this.signature)
				}

			},
			save() {

				let param = {
					userID: this.userinfo.userID,
					sex: this.sexnum,
					type: "4"
				};
				let that = this;
				this.$http.post(this.$baseUrl.baseurl + "kpcx/appPersonalCenter/updateInfo", param).then((res) => {
					if(res.data.Code == 0) {
						var userinfo = res.data.Result.appuser;
						if(res.data.Result.appuser) {
							that.$store.commit('USERINFO', userinfo);
							if(res.data.Result.appuser.IDNo) {
								userinfo.realnamestatus = true;
								that.$store.commit('USERINFO', userinfo);
							} else {
								userinfo.realnamestatus = false;
								that.$store.commit('USERINFO', userinfo);
							}
							that.$router.go(-1);
						} else {
							that.$toast('用户信息不存在');
						}
					} else {
						that.$toast(res.data.msg);
					}

				}).catch((err) => {

				})

			}
		},
		components: {
			XInput,
			Group,
			Radio
		},
		computed: mapGetters(['userinfo', ]),
		beforeDestroy() {
			this.$root.eventHub.$off('nicketSex');
		},
	}
</script>

<style scoped>
	/* //头像部分 */
	
	.kp-set {
		background: #fff;
	}
	.kp-set *{
		box-sizing: content-box;
	}
	.kp-sf-img {
		width: 136px;
		height: 136px;
		margin: 0 auto;
		overflow: hidden;
		padding-top: 66px;
		box-sizing: content-box;
	}
	
	.kp-sf-img img {
		width: 136px;
		height: 136px;
	}
	
	.kp-sf-info {
		text-align: center;
		margin-top: 24px;
		font-size: 28px;
		color: rgb(170, 170, 170);
	}
	/* /信息表单 */
	
	.kp-basic-info {
		padding: 50px 30px 0 30px;
	}
	
	.kp-basic-info h2 {
		font-size: 30px;
		color: rgb(170, 170, 170);
		font-weight: normal;
		padding-bottom: 23px;
	}
	
	.kp-bd-mtb49 {
		margin: 19px 0;
		height: 1px;
		background: rgb(225, 225, 225);
		color: rgb(225, 225, 225);
	}
	
	.kp-bb-li {
		padding: 30px 0;
		height: 40px;
	}
	.kp-bb-liP{
		height: 70px;
	}
	.kp-bb-li /deep/ .weui-cells {
		height: 40px;
		line-height: 40px;
		margin: 0;
		background: none;
	}
	
	.kp-bb-li /deep/ .weui-cells .weui-cell {
		padding: 0;
	}
	
	.kp-bb-li /deep/ .weui-cells .weui-cell .weui-label {
		font-size: 30px;
		color: rgb(85, 85, 85);
	}
	
	.kp-bb-li /deep/ .weui-cells .weui-cell .weui-cell__bd {
		padding: 0 30px;
		font-size: 30px;
		color: rgb(169, 169, 169);
	}
	
	.kp-bb-li /deep/ .weui-cells .kp-icon-none .weui-cell__bd .weui-input {
		color: #000;
		-webkit-text-fill-color: #000;
	}
	
	.kp-bb-li /deep/ .weui-cells .kp-icon-none .weui-cell__bd .weui-input::-webkit-input-placeholder {
		color: rgb(169, 169, 169);
		-webkit-text-fill-color: rgb(169, 169, 169);
	}
	
	.kp-bb-li /deep/ .weui-cells .kp-icon-none .weui-cell__bd .weui-input::-moz-placeholder {
		color: rgb(169, 169, 169);
		-webkit-text-fill-color: rgb(169, 169, 169);
	}
	
	.kp-bb-li /deep/ .weui-cells .kp-icon-none .weui-cell__bd .weui-input::-ms-input-placeholder {
		color: rgb(169, 169, 169);
		-webkit-text-fill-color: rgb(169, 169, 169);
	}
	
	.kp-bb-li /deep/ .weui-cells .kp-icon-1 .weui-cell__bd .weui-input {
		color: #000;
		-webkit-text-fill-color: #000;
	}
	
	.kp-bb-li /deep/ .weui-cells .kp-icon-1 .weui-cell__bd .weui-input::-webkit-input-placeholder {
		color: rgb(169, 169, 169);
		-webkit-text-fill-color: rgb(169, 169, 169);
	}
	
	.kp-bb-li /deep/ .weui-cells .kp-icon-1 .weui-cell__bd .weui-input::-moz-placeholder {
		color: rgb(169, 169, 169);
		-webkit-text-fill-color: rgb(169, 169, 169);
	}
	
	.kp-bb-li /deep/ .weui-cells .kp-icon-1 .weui-cell__bd .weui-input::-ms-input-placeholder {
		color: rgb(169, 169, 169);
		-webkit-text-fill-color: rgb(169, 169, 169);
	}
	
	.kp-bb-li /deep/ .weui-cells:after,
	.kp-bb-li /deep/ .weui-cells:before {
		border: none;
	}
	
	.kp-bb-li /deep/ .weui-cells__title {
		font-size: 30px;
		color: rgb(85, 85, 85);
		margin: 0;
		padding: 0;
		flex: 1;
	}
	
	.kp-bb-li-flex {
		display: flex;
	}
	
	.kp-bb-li-flex /deep/ .weui-cells {
		flex: 2;
	}
	
	.kp-bb-li-flex /deep/ .weui-cells .weui-cells_radio .weui-cell {
		float: right;
		margin-left: 35px;
	}
	
	.kp-bb-li-flex /deep/ .weui-cells .weui-cells_radio .weui-cell .weui-cell__ft .weui-check:checked+.weui-icon-checked {
		background: url(../../../assets/d.png) no-repeat center center;
		background-size: 34px 34px;
	}
	
	.kp-bb-li-flex /deep/ .weui-cells .weui-cells_radio .weui-cell .weui-cell__ft .weui-icon-checked {
		background: url(../../../assets/c.png) no-repeat center center;
		background-size: 34px 34px;
		width: 34px;
		height: 34px;
	}
	
	.kp-bb-li-flex /deep/ .weui-cells .weui-cells_radio .weui-cell .weui-cell__ft .weui-icon-checked:before {
		display: none;
	}
	
	.kp-bb-li-flex /deep/ .weui-cells .weui-cells_radio .weui-cell:before {
		border-top: 0;
	}
	
	.kp-bb-li-flex /deep/ .weui-cells .weui-cell .weui-cell__bd {
		padding-right: 20px;
	}
</style>